<template>
  <div>
    <ul class="top-bar">
      <li :class="{active: isActive1}"  @click="goTop250">电影TOP250</li>
      <li :class="{active: isActive2}"  @click="goIntheater">正在热映</li>
      <li :class="{active: isActive3}"  @click="goNewmovie">即将上映</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data: function() {
      return {
        isActive1: true,
        isActive2: false,
        isActive3: false,
      }
    },
    methods:{
      goTop250(){
        this.isActive1 = true;
        this.isActive2 = false;
        this.isActive3 = false;
        this.$router.history.push('/top250');
      },

      goIntheater(){
        this.isActive2 = true;
        this.isActive1 = false;
        this.isActive3 = false;
        this.$router.history.push('/intheaters');
      },
      goNewmovie(){
        this.isActive3 = true;
        this.isActive1 = false;
        this.isActive2 = false;
        this.$router.history.push('/onfilm');
      }
    }
  }
</script>

<style type="text/less" lang='less' scoped>
  *{
    margin: 0;
    padding :0;
  }
  ul,li{
    list-style: none;
    margin: 0 !important;
    padding: 0;
  }
  .top-bar{
    width: 100%;
    text-align: center;
    color: #eee;
    font-size: 16px;
  }

  ul{
    width: 100%;
    display: flex;
  }
  ul>li{
    background: #0562C2;
    flex: 1;
    height: 40px;
    line-height: 40px;
  }
  .active{
    background-color: #0ea0eb;
    color: white;
  }

</style>
